<template>
    <div id="paper-ExaminationPaper">
        <el-dialog
            title="在线考试中...1234"
            v-model="isUseDialog" 
            draggable 
            :fullscreen="true" 
            :showClose="false"
            :closeOnClickModal="false"
            :closeOnPressEscape="false"
        >
            <!-- 试卷内容 -->
            <div class="paper-outer" :key="componentKey">
                <!-- 标题 -->
                <div class="paper-outer-title">
                    <!-- <h2>{{ paperName }}：总分（{{ totalNum }}）</h2> -->
                    <h2>{{ titleCon }}考试：总分（{{ totalNum }}）</h2>
                </div>
                <!-- 内容 -->
                <ul>
                    <div v-for="item in paperCon">
                        <li class="paper-topic">
                            <h4>{{item.n_Sort}}：{{ item.v_Topic }}
                                <span>（题型：{{ item.v_TypeName }}，单题分数：{{ item.n_Score }}）</span>
                                <!-- <i v-if="item.isCorrect === '1'"><el-icon color="#67C23A" :size="20"><Select /></el-icon></i>
                                <i v-if="item.isCorrect === '2'"><el-icon color="#F56C6C" :size="20"><CloseBold /></el-icon></i> -->
                            </h4>
                            <div v-if="item.n_Type !== 2" v-for="opIem in item.options" :key="opIem.id">
                                <span class="paper-con-s">{{opIem.v_Option}}：{{opIem.v_Content}}</span>
                            </div>
                            <!-- 单选 -->
                            <div v-if="item.n_Type === 0" style="color: #4C4D4F; font-size: 12px;">
                                <el-radio-group v-model="item.radioVal" class="ml-4">
                                    <el-radio v-for="opIem in item.options" :key="opIem.id" :label="opIem.checkedVal" size="large">{{ opIem.v_Option }}</el-radio>
                                </el-radio-group>
                            </div>
                            <!-- 多选 -->
                            <div v-if="item.n_Type === 1" style="color: #4C4D4F; font-size: 12px;">
                                <el-checkbox v-for="opIem in item.options" :key="opIem.id" v-model="opIem.checkedVal" @change="checkChange(opIem.id,item.n_Sort,$event)" :label="opIem.v_Option" size="large" />
                            </div>
                            <!-- 判断 -->
                            <div v-if="item.n_Type === 2" style="color: #4C4D4F; font-size: 12px;">
                                <el-radio-group v-model="item.radioVal" class="ml-4">
                                    <el-radio label="true" size="large">对</el-radio>
                                    <el-radio label="false" size="large">错</el-radio>
                                </el-radio-group>
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
            <template #footer>
                <!-- <el-button @click="cancelUseClick">取 消</el-button> -->
                <el-button :loading="repeatDis" :disabled="repeatDis" type="primary" @click="submitForm">交 卷</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive , toRefs , computed , watch , ref } from 'vue';
import { OmsEduExamOLHandedIn } from '/@/api/centerControl/sms';
import { useRouter } from 'vue-router';
interface PaperInfo {
  paperName: string;
  paperCon: Array<{
    v_Topic: String,
    id: Number,
    n_Score: Number,
    n_Sort: Number,
    n_Type: Number,
    options: any,
    v_TypeName: String,
    radioVal: any,
    isCorrect: any,
    isChange: any,
  }>;
  titleCon: string;
  totalNum: Number;
}
export default defineComponent( {
    name: 'paper-ExaminationPaper',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const paperInfo = reactive<PaperInfo>({
            paperName: '',
            paperCon: [],
            titleCon: '',
            totalNum: 0,
        });
        let paperArr: any = '';
        const componentKey:any = ref(0);
        const repeatDis = ref(false);
        const router = useRouter(); // 使用 useRouter 获取路由实例
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                repeatDis.value = false;
                paperArr = JSON.parse(props.repairInfo).paperArr;
                paperArr.map((i: any) => {
                    i.isCorrect = '0';
                    i.options.forEach(((item: any) => {
                        item.checkedVal = "id" + item.id
                    }));
                    if(i.n_Type === 0 || i.n_Type === 2) i.radioVal = '';
                    if(i.n_Type === 1){
                        let setArr:any = []
                        i.options.map((j: any) => {
                            if(j.isTrue === true){
                                setArr.push(j.id);
                            }
                        });
                        i.radioVal = setArr;
                        i.isChange = [];
                    }
                });
                console.log(paperArr,'paperArr')
                paperInfo.paperCon = paperArr;
                // paperInfo.titleCon =  JSON.parse(props.repairInfo).titleCon + '在线考试中...';
                paperInfo.titleCon =  JSON.parse(props.repairInfo).titleCon;
                paperInfo.totalNum = JSON.parse(props.repairInfo).totalNum;
            }
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick()
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            componentKey.value = 0;
            ctx.emit('cancelExamClick')
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        /*** submitForm 获取用户选中的数据 */
        const submitForm = async () => {
            let param:any = {}
            param.l_TrainingPlanId = JSON.parse(props.repairInfo).l_TrainingPlanId;
            param.l_SysUserId = JSON.parse(props.repairInfo).userId;
            let userExamPapers = [];
            for(let item:any = 0 ; item < paperArr.length ; item++){
                let creatObj:any = {};
                creatObj.l_SysUserId = JSON.parse(props.repairInfo).userId;
                creatObj.l_TrainingPlanId = JSON.parse(props.repairInfo).l_TrainingPlanId;
                creatObj.n_Sort = paperArr[item].n_Sort;
                creatObj.l_ExaminationDBId = paperArr[item].id;
                let creatArr = [];
                for(let i:any = 0 ; i < paperArr[item].options.length ; i++){
                    let setObj:any = {}
                    // 单选
                    if(paperArr[item].n_Type === 0){
                        if(paperArr[item].radioVal !==  ''){
                            if(paperArr[item].radioVal === paperArr[item].options[i].checkedVal) {
                                setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                                setObj.isUserChoice = true;
                            }else{
                                setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                                setObj.isUserChoice = false;
                            }
                        }else{
                            setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                            setObj.isUserChoice = false;
                        }
                    }

                    // 多选
                    if(paperArr[item].n_Type === 1){
                        if(paperArr[item].isChange.length !== 0){
                            if(paperArr[item].options[i].checkedVal === true){
                                setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                                setObj.isUserChoice = true;
                            }else if(typeof paperArr[item].options[i].checkedVal === 'string'){
                                setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                                setObj.isUserChoice = false;
                            }
                        }else{
                            setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                            setObj.isUserChoice = false;
                        }
                    }

                    // 判断
                    if(paperArr[item].n_Type === 2){
                        if(paperArr[item].radioVal === ''){
                            setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                            setObj.isUserChoice = false;
                        }else if(paperArr[item].radioVal === 'true'){
                            setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                            setObj.isUserChoice = true;
                        }else if(paperArr[item].radioVal === 'false'){
                            setObj.l_ExaminationDBDeId = paperArr[item].options[i].id;
                            setObj.isUserChoice = false
                        }
                    }
                    creatArr.push(setObj);
                }
                creatObj.examPaperDe = creatArr;
                userExamPapers.push(creatObj);
            }
            param.userExamPapers = userExamPapers;
            repeatDis.value = true;
            try{
                let res: any = await OmsEduExamOLHandedIn(param);
                if(res.success) {
                    if(JSON.parse(props.repairInfo).setStatus === 'new'){
                        router.push({
                            path: '/sms/EducationalTraining/MyExam',
                        });
                        localStorage.setItem('l_TrainingPlanId',JSON.parse(props.repairInfo).l_TrainingPlanId);
                        
                    }else{
                        ctx.emit('controlExamClick');
                        ctx.emit('updateData');
                    }
                    repeatDis.value = false;
                }else{
                    repeatDis.value = false;
                }
            }catch(error){ repeatDis.value = false; }
        }

        /*** checkChange 多选改变事件 */
        const checkChange = (i:any , j:any , e:any) => {
            if(e) paperArr[j-1].isChange.push(i);
            else paperArr[j-1].isChange = paperArr[j-1].isChange.filter((item: any) => item !== i);
        }

        return {
            handleClose,
            cancelUseClick,
            isUseDialog,
            ...toRefs(paperInfo),
            submitForm,
            checkChange,
            componentKey,
            repeatDis,
        }
    },
} )
</script>
<style scoped lang="scss">
#paper-ExaminationPaper{
    :deep(.el-dialog__body){
        height: calc(100vh - 110px);
        max-height: none!important;
        overflow-y: auto;
    }
    .paper-outer{
        background-color: #FFFFFF;
        width: 60%;
        margin: auto;
        // height: 60vh;
        border-radius: 5px;
        padding: 20px;
        .paper-outer-title{
            margin: auto;
            width: 100%;
            padding-bottom: 10px;
            border-bottom: 1px dashed #6C6E72;
            h2{
                width: 100%;
                text-align: center;
                color: #39393A;
            }
        }
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
            h4{
                display: fixed;
                align-items: center;
                color: #363637;   
                span{
                    color: #4C4D4F;
                    font-size: 12px;
                } 
            }
            .paper-con-s{
                display: block;
                color: #363637;
                padding: 5px 0; 
            }
        }
        .paper-topic{
            padding: 10px 0;
        }
    }
    :deep(.el-checkbox__inner) , :deep(.el-checkbox__label) , :deep(.el-radio__label){
        color: #2B2B2C;
    }
}
</style>